<!DOCTYPE HTML>
<html>
<head>
	<title>Happy Birthday To Stephanie</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="生日礼物，惊喜,有趣" />
	<meta name="description" content="send to Wendy，but,,, ಥ_ಥ " />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/ohmygod.css" rel="stylesheet" type="text/css"/>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?e9e0ed8d2dd56059cc040dc1f05b7424";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>
<body>

	<style>a.__cl_weblink{position:fixed;top:10px;right:20px;display:inlin-block}</style>
	<a class='__cl_weblink' href='http://cloud.xiaoi.com/web/index.jsp?uid=b3dd25a42b7b41b39f004cd316b02b60' target='_blank'>
	<img src='http://cloud.xiaoi.com/images/icon/access_code_icon.jpg'></img></a>
	
	<div class="container">
		<div class="row">
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/1.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/2.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/3.jpg" alt="...">
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/4.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/5.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/6.jpg" alt="...">
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/7.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/8.jpg" alt="...">
				</a>
			</div>
			<div class="col-xs-4 col-md-4">
				<a href="http://www.huqian.name/" class="thumbnail">
					<img src="img/9.jpg" alt="...">
				</a>
			</div>
		</div>
	</div>
  <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript">
    var bstop = true;
    $('#box div').on('mousedown', function(e) {
        if (bstop) {
            bstop = false;
            var that = this;
            var disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
            var disy = e.offsetY;
            var $clone = $(this).clone(); //克隆
            $clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
                left: $(this).position().left,
                top: $(this).position().top
            });
            $('#box').append($clone); //追加到box里面
            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
            $('#box').on('mousemove', function(e) { //对克隆的盒子进行拖拽
                $clone.css({
                    left: e.pageX - $(this).offset().left - disx,
                    top: e.pageY - $(this).offset().top - disy
                })
               
            });

            $clone.on('mouseup', function() {
                $('#box').off('mousemove'); //取消mousemove事件
                var minIndex = $(that).index(); //最小索引赋初始值
                var minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                $('#box div').not(':last').each(function() { //不包括克隆的那个盒子
                    var smalldistance = Math.sqrt(Math.pow($clone.position().left - $(this).position().left, 2) + Math.pow($clone.position().top - $(this).position().top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                    if (smalldistance < minValue) { //比较
                        minValue = smalldistance; //获取最小值
                        minIndex = $(this).index(); //获取最小值对应的索引
                    }
                });
                if (minIndex == $(that).index()) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
                    $clone.animate($(that).position(), 400, function() {
                        $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                        $(this).remove(); //移除被克隆的盒子
                        bstop=true;
                    });
                } else {
                    var $minbox = $('#box div').eq(minIndex); //最小索引的盒子
                    var $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                    $clone2.addClass('draging').css({
                        left: $minbox.position().left,
                        top: $minbox.position().top
                    })
                    $('#box').append($clone2); //追加
                    $minbox.addClass('moving').html('');
                    $clone.animate($minbox.position(), 400, function() { //克隆的内容运动到最小索引的盒子的位置
                        $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                        $clone.remove(); //移除克隆的盒子
                        bstop = true;
                    });
                    $clone2.animate($(that).position(), 400, function() {
                        $(that).removeClass('moving').html($clone2.html());
                        $clone2.remove();
                        bstop = true;
                    });
                }
            });
        }
        return false;
    });
    </script>

</body>
</html>
